<template>
    <div id="exercise">
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'

/**
 * 顶点颜色渲染模型，注意THREE.VertexColors取值
 */


onMounted(()=>{

    /** 1.创建场景对象Scene*/
    var scene = new THREE.Scene();


    /** 2.创建模型 */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象
    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标

        0, 0, 10, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 10, //顶点6坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;
    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
        1, 0, 0, //顶点1颜色
        0, 1, 0, //顶点2颜色
        0, 0, 1, //顶点3颜色

        1, 1, 0, //顶点4颜色
        0, 1, 1, //顶点5颜色
        1, 0, 1, //顶点6颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
    //材质对象
    var material = new THREE.PointsMaterial({
        // 使用顶点颜色数据渲染模型，不需要再定义color属性
        // color: 0xff0000,
        // vertexColors: THREE.VertexColors, //以顶点颜色为准，资料是这个，但是不会生效
        vertexColors: true, //以顶点颜色为准，查源码，它的值为boolean类型，所有设置为true
        size: 10.0 //点对象像素尺寸
    });
    // 点渲染模式  点模型对象Points
    var points = new THREE.Points(geometry, material); //点模型对象
    scene.add(points); //点对象添加到场景

    // var material = new THREE.MeshBasicMaterial({
    //     // color: 0x0000ff, //三角面颜色
    //     vertexColors: true,
    //     side: THREE.DoubleSide //两面可见
    // });
    // var mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh)



    /** 3.光源设置 */
    // //点光源
    // var pointLights = new THREE.PointLight(0xffffff);
    // pointLights.position.set(400, 200, 300); //点光源位置
    // scene.add(pointLights); //点光源添加到场景中
    // //环境光
    // var ambientLights = new THREE.AmbientLight(0xffffff);
    // scene.add(ambientLights);
   

    /** 4.相机设置 */
    var width = 1200; //窗口宽度
    var height = 800;
    var k = width/height;
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 200, 200);// 设置相机位置
    camera.lookAt(scene.position); //设置相机方向（指向的场景对象）

    /**5.创建的渲染对象 */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById('exercise').appendChild(renderer.domElement);
    // renderer.render(scene, camera);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxesHelper(450);
    scene.add(axisHelper);

    /**鼠标操作 */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);
    }
    render();
    new OrbitControls(camera, renderer.domElement);//创建控件对象

})



</script>

<style lang="scss" scoped>

</style>